<template>
  <div class="remote-control">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-setting"></i> 远程控制台</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-table 
      :data="tableData"
      :header-cell-style="{background:'#f5f7fa'}"
      border>
        <el-table-column 
          prop="target"
          label="目标"
          align="center">
        </el-table-column>
        <el-table-column 
          label="状态"
          align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state===0?'success':(scope.row.state===1?'danger':'warning')">  
              {{scope.row.state===0?' 开启':(scope.row.state===1?' 关闭':'未知')}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button 
            size="medium"
            type="primary"
            :disabled="scope.row.state  === 0"
            @click="open(scope)">
              开启 
            </el-button>
            <el-button 
            size="medium"
            type="danger"
            :disabled="scope.row.state  === 1"
            @click="close(scope)">
              关闭 
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        target: '外网',
        state: null 
      },{
        target: '天窗1',
        state: null 
      },{
        target: '天窗2',
        state: null 
      },{
        target: '内网',
        state: null 
      },{
        target: '风机1',
        state: null 
      },{
        target: '风机2',
        state: null 
      },{
        target: '风机3',
        state: null 
      },{
        target: '风机4',
        state: null 
      },{
        target: '水墙泵',
        state: null 
      },{
        target: '循环风机',
        state: null 
      },{
        target: '微喷泵',
        state: null 
      },{
        target: '侧窗',
        state: null 
      },{
        target: '总控',
        state: null 
      },{
        target: '总电源',
        state: null 
      }]
    }
  },
  methods: {
    // 点击开启按钮 
    open(scope) {
      const hexCode = ((scope.$index * 2 + 1)<16?'0':'') + (scope.$index * 2 + 1).toString(16);
      console.log(` 开启 ${scope.row.target},  代码: e20204${hexCode}`);
      
      // 立即更新UI状态为"操作中"
      this.$set(this.tableData,  scope.$index, {
        ...scope.row, 
        state: null // null表示操作中/未知状态 
      });
      
      // 模拟API调用 
      this.mockButtonClick(hexCode,  true, scope.$index);
    },
    
    // 点击关闭按钮 
    close(scope) {
      const hexCode = ((scope.$index * 2 + 2)<16?'0':'') + (scope.$index * 2 + 2).toString(16);
      console.log(` 关闭 ${scope.row.target},  代码: e20204${hexCode}`);
      
      // 立即更新UI状态为"操作中"
      this.$set(this.tableData,  scope.$index, {
        ...scope.row, 
        state: null // null表示操作中/未知状态 
      });
      
      // 模拟API调用 
      this.mockButtonClick(hexCode,  false, scope.$index);
    },
    
    // 模拟按钮点击 
    mockButtonClick(cmd, isOpen, index) {
      // 模拟API延迟 
      setTimeout(() => {
        console.log(` 模拟发送控制命令: e20204${cmd}`);
        
        // 随机模拟操作成功或失败 
        if (Math.random()  > 0.2) { // 80%成功率 
          console.log(' 控制命令执行成功');
          // 更新状态 
          this.$set(this.tableData,  index, {
            ...this.tableData[index], 
            state: isOpen ? 0 : 1 // 0=开启, 1=关闭 
          });
        } else {
          console.log(' 控制命令执行失败');
          // 保持原状态不变 
          this.getButtonState(); 
        }
      }, 500);
    },
    
    // 获取所有按钮状态 
    getButtonState() {
      // 模拟API延迟 
      setTimeout(() => {
        this.tableData  = this.tableData.map(item  => {
          // 如果已经是确定状态(0或1)，保持原状态 
          // 否则随机生成新状态 
          return {
            ...item,
            state: item.state  !== null ? item.state  : Math.random()  > 0.5 ? 0 : 1 
          };
        });
        
        console.log(' 设备状态更新:', this.tableData);  
      }, 300);
    }
  },
  activated() {
    this.getButtonState();  
  }
}
</script>
 
<style scoped>
  .remote-control {
    padding: 20px;
  }
  .crumbs {
    margin-bottom: 20px;
  }
  .container {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  .el-tag {
    font-size: 14px;
    min-width: 60px;
  }
  .el-button {
    margin: 0 5px;
  }
</style>